<template>
	<div>
		<Card>
			<!-- 删除面板 -->
			<Modal v-model="deleteNsall" title="删除" @on-ok="remove" @on-cancel="cancel">
				是否删除该项
			</Modal>
			<!-- 详情面板 -->
			<Modal v-model="details" title="详情" @on-ok="remove" @on-cancel="cancel" width="800" class="details">
				<Card class="myCard">
					<div class="title">
						详情
					</div>
					<div class="form">
						<label>名称：</label>
						<span>{{name}}</span>
					</div>
					<div class="form">
						<label>命名空间：</label>
						<span>{{nameSpace}}</span>
					</div>
					<div class="form">
						<label>注释</label>
						<span v-for="(item, index) in notes" :key="index">
							<div>{{item}}</div>
						</span>
					</div>
					<div class="form">
						<label>创建时间：</label>
						<span>{{date}}</span>
					</div>
					<div class="form">
						<label>状态：</label>
						<span>{{state}}</span>
					</div>
					<div class="form">
						<label>存储卷：</label>
						<span>{{volume}}</span>
					</div>
					<div class="form">
						<label>访问模式：</label>
						<span>{{visite}}</span>
					</div>
					<div class="form">
						<label>存储类：</label>
						<span>{{storage}}</span>
					</div>
				</Card>
				<Card class="myCard">
					<div class="title">
						总量
					</div>
					<Table :columns="columns1" :data="tableData1"></Table>
				</Card>
			</Modal>
			<Table :columns="columns" :data="tableData"></Table>
		</Card>
	</div>
</template>

<script>
	import Util from '@/utils/index'
	export default {
		data () {
			return {
				columns: [
					{
						title: '名称',
						key: 'metadata',
						width: '100px',
						render: (h, params) => {
							return h('span', params.row.metadata.name)
						}
					},
					{
						title: '命名空间',
						key: 'metadata',
						width: '100px',
						render: (h, params) => {
							return h('span', params.row.metadata.namespace)
						}
					},
					{
						title: '状态',
						key: 'status',
						width: '80px',
						render: (h, params) => {
							return h('span', params.row.status.phase)
						}
					},
					{
						title: '存储卷',
						key: 'spec',
						render: (h, params) => {
							return h('span', params.row.spec.volumeName)
						}
					},
					{
						title: '声明',
						key: 'spec',
						width: '80px',
						render: (h, params) => {
							return h('span', params.row.spec.resources.requests.storage)
						}
					},
					{
						title: '访问模式',
						key: 'spec',
						width: '180px',
						render: (h, params) => {
							return h('span', params.row.spec.accessModes[0])
						}
					},
					{
						title: '存储类',
						key: 'spec',
						width: '80px',
						render: (h, params) => {
							return h('span', '-')
						}
					},
					{
						title: '运行时间',
						key: 'metadata',
						width: '180px',
						render: (h, params) => {
							return h('span', Util.fommotDate(params.row.metadata.creationTimestamp))
						}
					},
					{
						title: '操作',
						key: 'handle',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.details = true
											let detailsData = this.tableData[params.index]
											// 名称
											this.name = detailsData.metadata.name
											// 注释
											this.notes = []
											for (let key in detailsData.metadata.annotations) {
												this.notes.push(key + ':' + detailsData.metadata.annotations[key])
											}
											// 创建时间
											this.date = Util.fommotDate(detailsData.metadata.creationTimestamp)
											// 状态
											this.state = detailsData.status.phase
											// 存储卷
											this.volume = detailsData.spec.volumeName
											// 命名空间
											this.nameSpace = detailsData.metadata.namespace
											// 访问模式
											this.visite = detailsData.spec.accessModes[0]
											// 存储类
											this.storage = '-'
											for (let key in detailsData.spec.capacity) {
												this.tableData1.push({name: key, value: detailsData.spec.capacity[key]})
											}
										}
									}
								}, '查看详情'),
								h('Button', {
									props: {
										type: 'error',
										size: 'small'
									},
									on: {
										click: () => {
											this.deleteNsall = true
											this.deleteName = params.row.metadata.name
											this.deleteNameSpace = params.row.metadata.namespace
											this.deleteIndex = params.index
										}
									}
								}, '删除')
							])
						}
					}
				],
				tableData: [],
				columns1: [
					{
						title: '资源名称',
						key: 'name'
					},
					{
						title: '总量',
						key: 'value'
					}
				],
				tableData1: [],
				// 删除面板
				deleteNsall: false,
				// 删除组名
				deleteName: '',
				// 删除命名空间
				deleteNameSpace: '',
				// 删除下标
				deleteIndex: '',
				// 应用类型列表
				typeList: [
					{
						name: 'stoarge',
						text: '存储类'
					},
					{
						name: 'PersistentVolumeClaim',
						text: '持久化存储卷声明'
					},
					{
						name: 'PersistentVolume',
						text: '持久化存储卷'
					}
				],
				// 详情面板
				details: false,
				// 名称
				name: '',
				// 注释
				notes: '',
				// 创建时间
				date: '',
				// 状态
				state: '',
				// 存储卷
				volume: '',
				// 命名空间
				nameSpace: '',
				// 访问模式
				visite: '',
				// 存储类
				storage: ''
			}
		},
		methods: {
			// 删除
			remove () {
				this.$api.delete(0, '/kuber/v2/k8s/stoarge?type=PersistentVolumeClaim&name=' + this.deleteName + '&nameSpace' + this.deleteNameSpace, {}, r => {
					if (r.data.code === 0) {
						this.tableData.splice(this.deleteIndex, 1)
						this.$Message.success('删除成功')
					} else {
						this.$Message.error('删除失败')
					}
					this.cancel()
				})
			},
			cancel () {
				this.deleteName = ''
				this.deleteIndex = ''
			},
			// 获取表格数据
			getList () {
				this.$api.get(0, '/kuber/v2/k8s/stoarge?type=PersistentVolumeClaim&owner=', {}, r => {
					this.tableData = r.data.data.items
				})
			}
		},
		mounted () {
			this.getList()
		}
	}
</script>

<style>
	label.myLabel {
		width: 100px;
		display: inline-block;
		margin-right: 15px;
		text-align: right;
	}

	div.form-div {
		margin-bottom: 15px;
	}

	.resources .ivu-modal {
		width: 500px !important
	}

	.resources label.myLabel {
		width: 200px
	}

	.resources .ivu-input-wrapper {
		width: 200px
	}
</style>
